
layui.config({
    base: '../js/city-picker/' //静态资源所在路径
}).extend({
    citypicker: 'city-picker' // {/}的意思即代表采用自有路径，即不跟随 base 路径
});

layui.use('citypicker', function () {
    var element = layui.element
        , form = layui.form
        , layer = layui.layer
        , $ = layui.jquery
        , table = layui.table
        , upload = layui.upload
        , util = layui.util;
    var cityPicker = layui.citypicker;
	var type3i = 0,type2i = 0;

    var currentPicker = new cityPicker("#address", {
        provincename: "provinceId",
        cityname: "cityId",
        districtname: "districtId",
        level: 'cityId',// 级别
    });

    table.render({
        elem: '#deviceTable',
        cellMinWidth: 80,
        url: base_url + "/cdinfogoDevice/pageList", //数据接口
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": 0, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.list //解析数据列表
            };
        },
        method: 'post',
        page: true,
        limits: [10,20,30,50,80,100],
        cols: [[ //表头
			{type: 'checkbox'}
            ,{type: 'numbers', title: "序号"}
            ,{field: 'id', align: 'center', hide: true}
            , {field: 'deviceName', title: '设备名称', align: 'center'}
            , {field: 'deviceType', title: '设备类型', align: 'center'}
            , {field: 'deviceMac', title: '设备MAC', align: 'center'}
            , {field: 'creator', title: '添加人员', align: 'center'}
            , {field: 'createTime', title: '创建时间', align: 'center'}
            , {fixed: 'right', title: '操作', align: 'center',width: 200 ,toolbar: '#barTask'}
        ]]
    });
	
	$("#device").click(function(){
		$.ajax({
			url: base_url + "cdinfogoDevice/updateDevice",
			success: function(res){
				layer.msg(res.msg)
				table.reload('deviceTable')
			}
		})
	})

	$(document).on('click',".del3",function(){
		$(this).parent().parent().remove()
	})
	
	$(document).on('click',".layui-form-checkbox",function(){
		if($(this).prev().length > 0){
			if($(this).prev()[0].checked){
				$(this).parent().parent().next().show();
			}else{
				$(this).parent().parent().next().hide();
			}
		}
	})
	
	$("#type3").html(`
	<div>
		<div class="layui-inline">
			<div class="layui-input-inline" style="margin-left: 13px;">
				<input type="text" class="layui-input" id="content0" placeholder="输入发布文本内容">
			</div>
		</div>
	
		<div class="layui-inline">
			<div class="layui-input-inline" style="width: 150px;">
				<input type="text" id="showArea0" placeholder="输入显示区域：01-32" class="layui-input">
			</div>
		</div>
	
		<div class="layui-inline">
			<div class="layui-input-inline" style="width: 150px;">
				<select id="showColor0">
					<option value=""></option>
					<option value="%1">红</option>
					<option value="%2">绿</option>
					<option value="%3">黄</option>
					<option value="%4">蓝</option>
					<option value="%5">紫</option>
					<option value="%6">青</option>
					<option value="%7">白</option>
				</select>
			</div>
		</div>
	
		<div class="layui-inline">
			<div class="layui-input-inline" style="width: 150px;">
				<select id="showFont0">
					<option value=""></option>
					<option value="%F16">小</option>
					<option value="%F24">中</option>
					<option value="%F32">大</option>
				</select>
			</div>
		</div>
	
		<div class="layui-inline">
			<button type="button" class="layui-btn layui-btn-danger layui-btn-sm del3">删除</button>
		</div>
	</div>
	`)
	
	$("#addType3").click(function(){
		type3i += 1
		$("#type3").append(`
			<div>
				<div class="layui-inline">
					<div class="layui-input-inline" style="margin-left: 13px;">
						<input type="text" class="layui-input" id="content${type3i}" placeholder="输入发布文本内容">
					</div>
				</div>
			
				<div class="layui-inline">
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" id="showArea${type3i}" placeholder="输入显示区域：01-32" class="layui-input">
					</div>
				</div>
			
				<div class="layui-inline">
					<div class="layui-input-inline" style="width: 150px;">
						<select id="showColor${type3i}">
						<option value=""></option>
							<option value="%1">红</option>
							<option value="%2">绿</option>
							<option value="%3">黄</option>
							<option value="%4">蓝</option>
							<option value="%5">紫</option>
							<option value="%6">青</option>
							<option value="%7">白</option>
						</select>
					</div>
				</div>
			
				<div class="layui-inline">
					<div class="layui-input-inline" style="width: 150px;">
						<select id="showFont${type3i}">
						<option value=""></option>
							<option value="%F16">小</option>
							<option value="%F24">中</option>
							<option value="%F32">大</option>
						</select>
					</div>
				</div>
				
				<div class="layui-inline">
					<button type="button" class="layui-btn layui-btn-danger layui-btn-sm del3">删除</button>
				</div>
				
			</div>
		`)
		form.render('select');
	})
	
	$.ajax({
		url: base_url + "cdinfogoDevice/getKQ",
		success: function(res){
			$.each(res.data,function(i,n){
				type2i += 1
				$("#type2").append(`
				<div style="width: 850px;height: 45px;">
					<div class="layui-inline" style="float: left;">
						<div class="layui-input-inline" style="width: 120px;">
							　<input type="checkbox" id="kq${type2i}" lay-skin="primary" checked title="${n.dictValue}">
						</div>
					</div>
					
					<div>
						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 150px;">
								<input type="text" id="contentType2${type2i}" placeholder="输入显示区域：01-32" class="layui-input">
							</div>
						</div>
						
						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 150px;">
								<select id="colorType2${type2i}">
								<option value=""></option>
									<option value="%1">红</option>
									<option value="%2">绿</option>
									<option value="%3">黄</option>
									<option value="%4">蓝</option>
									<option value="%5">紫</option>
									<option value="%6">青</option>
									<option value="%7">白</option>
								</select>
							</div>
						</div>
						
						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 150px;">
								<select id="fontType2${type2i}">
								<option value=""></option>
									<option value="%F16">小</option>
									<option value="%F24">中</option>
									<option value="%F32">大</option>
								</select>
							</div>
						</div>
					</div>
					
				</div>
				`)
			})
			form.render('select');
			form.render('checkbox');
		}
	})
	
	$("#info").click(function(){
		type3i = 0;
		var checkStatus = table.checkStatus('deviceTable');
		console.log(checkStatus.data) //获取选中行的数据
		console.log(checkStatus.data.length)
		if(checkStatus.data.length < 1){
			layer.msg("至少选择一行数据")
			return false;
		}
		$("#projectForm")[0].reset();
		currentPicker.setValue("")
		$("#type3").html('')
		layer.open({
		    type: 1,
		    title: "发布信息",
		    offset: 'auto',
		    skin: 'demo-class',
		    closeBtn: 1,
		    shift: 2,
		    area: ['906px', '600px'],
		    content: $("#projectForm")
		});
	})

    /*楼栋表操作*/
    table.on('tool(deviceTable)', function (obj) {
        var rowData = obj.data;
       
        if (obj.event === 'edit') {
            $("#deviceId").val(rowData.id)
			$.ajax({
				url: base_url + "cdinfogoDevice/getDeviceContent?deviceId="+rowData.id,
				success: function(res){
					console.log(res)
					if(res.data.weather){
						currentPicker.setValue(res.data.weather.city)
						$("#type1Area").val(res.data.weather.showArea)
						$("#type1Color").val(res.data.weather.showColor)
						$("#type1Font").val(res.data.weather.showFont)
						form.render('select');
					}else{
						$("#weather").next().removeClass("layui-form-checked")
						$("#weather").next().parent().parent().next().hide();
					}
					
					if(res.data.kqList){
						$("#type2").html('')
						var kqname = new Map;
						$.each(res.data.kqList,function(i,n){
							type2i += 1;
							kqname.set(n.content,"111");
							
							$("#type2").append(`
							<div style="width: 850px;height: 45px;">
								<div class="layui-inline" style="float: left;">
									<div class="layui-input-inline" style="width: 120px;">
										　<input type="checkbox" id="kq${type2i}" lay-skin="primary" checked='false' title="${n.content}">
									</div>
								</div>
								
								<div>
									<div class="layui-inline">
										<div class="layui-input-inline" style="width: 150px;">
											<input type="text" id="contentType2${type2i}" placeholder="输入显示区域：01-32" class="layui-input">
										</div>
									</div>
									
									<div class="layui-inline">
										<div class="layui-input-inline" style="width: 150px;">
											<select id="colorType2${type2i}">
											<option value=""></option>
												<option value="%1">红</option>
												<option value="%2">绿</option>
												<option value="%3">黄</option>
												<option value="%4">蓝</option>
												<option value="%5">紫</option>
												<option value="%6">青</option>
												<option value="%7">白</option>
											</select>
										</div>
									</div>
									
									<div class="layui-inline">
										<div class="layui-input-inline" style="width: 150px;">
											<select id="fontType2${type2i}">
											<option value=""></option>
												<option value="%F16">小</option>
												<option value="%F24">中</option>
												<option value="%F32">大</option>
											</select>
										</div>
									</div>
								</div>
								
							</div>
							`)
							$("#contentType2"+type2i).val(n.showArea)
							$("#colorType2"+type2i).val(n.showColor)
							$("#fontType2"+type2i).val(n.showFont)
						})
						
						$.ajax({
							url: base_url + "cdinfogoDevice/getKQ",
							async: false,
							success: function(res){
								$.each(res.data,function(i,n){
									type2i += 1
									if(!kqname.get(n.dictValue)){
										$("#type2").append(`
										<div style="width: 850px;height: 45px;">
											<div class="layui-inline" style="float: left;">
												<div class="layui-input-inline" style="width: 120px;">
													　<input type="checkbox" id="kq${type2i}" lay-skin="primary" title="${n.dictValue}">
												</div>
											</div>
											
											<div style="display:none">
												<div class="layui-inline">
													<div class="layui-input-inline" style="width: 150px;">
														<input type="text" id="contentType2${type2i}" placeholder="输入显示区域：01-32" class="layui-input">
													</div>
												</div>
												
												<div class="layui-inline">
													<div class="layui-input-inline" style="width: 150px;">
														<select id="colorType2${type2i}">
														<option value=""></option>
															<option value="%1">红</option>
															<option value="%2">绿</option>
															<option value="%3">黄</option>
															<option value="%4">蓝</option>
															<option value="%5">紫</option>
															<option value="%6">青</option>
															<option value="%7">白</option>
														</select>
													</div>
												</div>
												
												<div class="layui-inline">
													<div class="layui-input-inline" style="width: 150px;">
														<select id="fontType2${type2i}">
														<option value=""></option>
															<option value="%F16">小</option>
															<option value="%F24">中</option>
															<option value="%F32">大</option>
														</select>
													</div>
												</div>
											</div>
											
										</div>
										`)
									}
								})
							}
						})
						
						form.render('select');
						form.render('checkbox');
					}else{
						$("#type2").html('')
						$.ajax({
							url: base_url + "cdinfogoDevice/getKQ",
							success: function(res){
								$.each(res.data,function(i,n){
									type2i += 1
									$("#type2").append(`
									<div style="width: 850px;height: 45px;">
										<div class="layui-inline" style="float: left;">
											<div class="layui-input-inline" style="width: 120px;">
												　<input type="checkbox" id="kq${type2i}" lay-skin="primary" checked='false' title="${n.dictValue}">
											</div>
										</div>
										
										<div style="display:none">
											<div class="layui-inline">
												<div class="layui-input-inline" style="width: 150px;">
													<input type="text" id="contentType2${type2i}" placeholder="输入显示区域：01-32" class="layui-input">
												</div>
											</div>
											
											<div class="layui-inline">
												<div class="layui-input-inline" style="width: 150px;">
													<select id="colorType2${type2i}">
													<option value=""></option>
														<option value="%1">红</option>
														<option value="%2">绿</option>
														<option value="%3">黄</option>
														<option value="%4">蓝</option>
														<option value="%5">紫</option>
														<option value="%6">青</option>
														<option value="%7">白</option>
													</select>
												</div>
											</div>
											
											<div class="layui-inline">
												<div class="layui-input-inline" style="width: 150px;">
													<select id="fontType2${type2i}">
													<option value=""></option>
														<option value="%F16">小</option>
														<option value="%F24">中</option>
														<option value="%F32">大</option>
													</select>
												</div>
											</div>
										</div>
										
									</div>
									`)
								})
								form.render('select');
								form.render('checkbox');
							}
						})
					}
					
					if(res.data.countList){
						$("#type3").html('')
						$.each(res.data.countList,function(i,n){
							$("#type3").append(`
							<div>
								<div class="layui-inline">
									<div class="layui-input-inline" style="margin-left: 13px;">
										<input type="text" class="layui-input" id="content${i}" placeholder="输入发布文本内容">
									</div>
								</div>
							
								<div class="layui-inline">
									<div class="layui-input-inline" style="width: 150px;">
										<input type="text" id="showArea${i}" placeholder="输入显示区域：01-32" class="layui-input">
									</div>
								</div>
							
								<div class="layui-inline">
									<div class="layui-input-inline" style="width: 150px;">
										<select id="showColor${i}">
										<option value=""></option>
											<option value="%1">红</option>
											<option value="%2">绿</option>
											<option value="%3">黄</option>
											<option value="%4">蓝</option>
											<option value="%5">紫</option>
											<option value="%6">青</option>
											<option value="%7">白</option>
										</select>
									</div>
								</div>
							
								<div class="layui-inline">
									<div class="layui-input-inline" style="width: 150px;">
										<select id="showFont${i}">
										<option value=""></option>
											<option value="%F16">小</option>
											<option value="%F24">中</option>
											<option value="%F32">大</option>
										</select>
									</div>
								</div>
							
								<div class="layui-inline">
									<button type="button" class="layui-btn layui-btn-danger layui-btn-sm del3">删除</button>
								</div>
							</div>
							`)
							$("#content"+i).val(n.content)
							$("#showArea"+i).val(n.showArea)
							$("#showColor"+i).val(n.showColor)
							$("#showFont"+i).val(n.showFont)
						})
						form.render('select');
					}else{
						$("#type3").html('')
					}
				}
			})
			
			
            currentPicker.setValue(rowData.address)
            form.render();
            layer.open({
                type: 1,
                title: "发布信息",
                offset: 'auto',
                skin: 'demo-class',
                closeBtn: 1,
                shift: 2,
                area: ['906px', '600px'],
                content: $("#projectForm")
            });
			
        } else {
            layer.confirm("确认删除该设备？", function () {
                $.ajax({
                    url: "/cdcbiBaseCommunity/del/" + rowData.id,
                    success: function (data) {
                        if (data.success) {
                            layer.msg(data.msg, {icon: 1});
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                        active['reload'].call(this);
                    }
                });
            });
        }
	});





    form.on('submit(basicBtn)', function (data) {
		var checkStatus = table.checkStatus('deviceTable');
		console.log(checkStatus.data) //获取选中行的数据
		
		var ids = []
		
		
		if($("#deviceId").val()){
			ids.push($("#deviceId").val())
		}else{
			$.each(checkStatus.data,function(i,n){
				ids.push(n.id)
			})
		}
		
		var contList = []
		var tqList = []
		
		for (var i = 1; i <= type2i; i++) {
			if($("#kq"+i).length > 0){
				if($("#kq"+i)[0].checked){
					contList.push({
						"content": $("#kq"+i).attr('title'),
						"showArea": $("#contentType2"+i).val().trim(),
						"showColor": $("#colorType2"+i).val(),
						"showFont": $("#fontType2"+i).val(),
						"showType": '2'
					})
				}
			}
		}
		
		for (var i = 0; i <= type3i; i++) {
			if($("#content"+i).length > 0){
				contList.push({
					"content": $("#content"+i).val(),
					"showArea": $("#showArea"+i).val().trim(),
					"showColor": $("#showColor"+i).val(),
					"showFont": $("#showFont"+i).val(),
					"showType": '3'
				})
			}
		}
		
		if($("#weather")[0].checked){
			console.log(data.field)
			if(data.field.cityId){
				//加载天气查询插件
				AMap.plugin('AMap.Weather', function() {
				    //创建天气查询实例
				    var weather = new AMap.Weather();
				
				    //执行实时天气信息查询
				    weather.getLive(data.field.cityId, function(err, wea) {
				        console.log(wea);
						tqList.push({
							"content": wea.temperature + "℃　" + wea.humidity + "%　" + wea.windDirection + "风　" + wea.weather,
							"showArea": data.field.type1Area,
							"showColor": data.field.type1Color,
							"showFont": data.field.type1Font,
							"showType": '1',
							"city": data.field.address,
							"other": data.field.cityId
						})
						
						$.ajax({
						    url: base_url + "cdinfogoContent/insert",
						    type: 'post',
						    data: {list:JSON.stringify(tqList),ids: JSON.stringify(ids)},
						    success: function (res) {
						        
						    }
						})
						
				    });
					
					
				});
			}
		
		}
		
		console.log(contList)
		     
		$.ajax({
		    url: base_url + "cdinfogoContent/insert",
		    type: 'post',
		    data: {list:JSON.stringify(contList),ids: JSON.stringify(ids)},
		    success: function (res) {
		        if (res.success) {
		            layer.msg(res.msg, {icon: 1});
		        } else {
		            layer.msg(res.msg, {icon: 2});
		        }
		        table.reload('deviceTable')
		    }
		})
	
        return false;
    });

	$("#infoBtn").click(function(){
		var checkStatus = table.checkStatus('deviceTable');
	
		var ids = []
		
		if($("#deviceId").val()){
			ids.push($("#deviceId").val())
		}else{
			$.each(checkStatus.data,function(i,n){
				ids.push(n.id)
			})
		}
		
		$.ajax({
			url: base_url + "cdinfogoDevice/controllerDevice",
			type: 'post',
			data: {ids: JSON.stringify(ids)},
			success: function(res){
				if(res.success){
					layer.msg("success")
				}else{
					layer.msg("error")
				}
			}
		})
	})

    form.on('submit(reload)', function (data) {
        //执行重载
        table.reload('deviceTable', {
            page: {
                curr: 1
            },
            where: data.field
        }, 'data');
        return false;
    });

   
    active = {
        reload: function () {
            //执行重载
            table.reload('deviceTable', {});
        }
    };

});







